Robert Kieffer, BendTech.com
"This specification should be read like all other specifications. First, it should be read cover-to-cover, multiple times. Then, it should be read backwards at least once. Then it should be read by picking random sections from the contents list and following all the cross-references."
"This specification evolves HTML and its related APIs to ease the authoring of Web-based applications"
Scalable Vector Graphics (the PNG?)
Video streaming & Access to cameras, microphones
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
Canvas tutorial Sphere Dynamic content injection
Generally accepted design philosophy.
(and a damn good idea if you want to support more than one kind of user)
Out: BASEFONT, BIG, CENTER, FONT, S, STRIKE, TT, U, ACRONYM, ISINDEX, DIR
In: SECTION, ARTICLE, ASIDE, HGROUP, HEADER, FOOTER, NAV, DIALOG, FIGURE
Out: align, alink, and, background, bgcolor, border, cellpadding, cellspacing, char, charoff, clear, compact, frame, frameborder, height, hspace, link, marginheight, marginwidth, noshade, nowrap, rules, scrolling, size, text, type, valign, vlink, vspace, width
(No browsers support these features yet)
HTML5 introduces "constraints" for form elements, and new constrained input types.
E.g:
var ZIP_SYNTAX = /^\d{5}(-\d{5})+$/;
myForm.zipcode.checkValidity = function() {
var valid = ZIP_SYNTAX.test(this.value);
this.setCustomValidity(valid ? '' : 'Not a valid zip code');
return valid;
}
history.pushState(data,title[,url])
history.replaceState(data,title[,url])
navigator.registerProtocolHandler(scheme,url,title)
navigator.registerContentHandler(mimeType,url,title)
window.postMessage
window.onmessage
'contentEditable' attribute can be used to make [almost] any part of a document editable.
Not yet supported, but in the spec.
undoManager.position undoManager.add(data,title) undoManager.remove(index) undoManager.clearUndo() undoManager.clearRedo()
navigator.geolocation.getCurrentPosition()
navigator.geolocation.watchPosition()
navigator.geolocation.clearWatch()
Coordinate data includes lat, lon, altitude, accuracy, heading, and speed
And now for the interesting stuff ...
A replacement for cookies
window.sessionStorage // session storage
// ... or ...
window.localStorage // persistent storage
store.length
store.key(index)
store.getItem(key)
store.setItem(key, data)
store.removeItem(key)
store.clear()
clock.html
<html manifest="clock.manifest">
<head>
<script src="clock.js"></script>
<link rel="stylesheet" href="clock.css">
</head>
<body>
<p>The time is: <span id="clock"></span></p>
</body>
</html>
clock.js
setTimeout(function () {
document.getElementById('clock').value = new Date();
}, 1000);
clock.css
#clock {font: 2em sans-serif;}
clock.manifest: (must be served as "text/cache-manifest" MIME-type)
CACHE MANIFEST
clock.html
clock.css
clock.js
var db = openDatabase("notes", "", "The Example Notes App!", 1048576);
db.transaction(function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS Notes(title TEXT, body TEXT)', []);
tx.executeSql(‘SELECT * FROM Notes’, [],
function(tx, result) {
for(var i = 0; i < result.rows.length; i++) renderNote(rs.rows[i]);
},
function(tx, error) {
reportError('sql', error.message);
});
});
(Standards status is unclear, but available in non-IE browsers today)
Enable Web applications to maintain bidirectional communications with server-side processes
var socket = new WebSocket('ws://game.example.com:12010/updates');
socket.onopen = function () {
setInterval(function() {
if (socket.bufferedAmount == 0)
socket.send(getUpdateData());
}, 50);
};
An API for running scripts in the background independently of any user interface scripts
About
Use Cases
Example:
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
// Respond to message from worker
};
worker.js
// Calculate primes ad-infinitum
while (true) {
n += 1;
for (var i = 2; i <= Math.sqrt(n); i += 1)
if (n % i == 0) continue search;
postMessage(n); // found a prime!
}
What browsers support (or will soon support) what?
| Firefox | IE | WebKit | Opera | |
|---|---|---|---|---|
| misc' elements | - | - | Y | - |
| Canvas | Y | ? | Y | Y |
| Audio | Y | - | Y | Y |
| Video | Y | - | Y | Y |
| SVG | Y | ? | Y | Y |
| CSS3 | 94% | 20% | 100% | 100% |
| Drag and Drop | Y | ? | ? | - |
| Offline caching | Y | - | Y | - |
| SQL Storage | ? | - | Y | - |
| Web Storage | Y | Y | Y | Y |
| Web Workers | Y | - | Y | - |
| Web Sockets | - | - | Y | - |
| Geolocation | Y | - | Y | Y |
Look for ...
iPhone App Store will close by Q4, 2012. ('kidding!)